<template>
  <div>
    <select name="" id="" v-model="sel">
      <option value="done">已完成</option>
      <option value="undone">未完成</option>
      <option value="all">全部</option>
    </select>
    <van-button id="btn" type="primary" @click="select">搜索</van-button>
    <van-button id="btn" type="info" @click="fh">返回</van-button>
    <div>
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        :title="item.title"
        size="large"
      >
      <div>{{item.state == 1 ? '已完成' : '未完成'}}</div>
      <van-button  class="del" @click="del(index)" type="danger">删除</van-button>
      </van-cell>      
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sel: "",
      list: [],
    };
  },
  methods: {
    select() {
      if (this.sel == "done") {
        this.list = this.$store.state.todolist.filter((item) => {
          return item.state == 1;
        });
      } else if (this.sel == "undone") {
        this.list = this.$store.state.todolist.filter((item) => {
          return item.state == 0;
        });
      } else {
        this.list = this.$store.state.todolist;
      }
    },
    fh() {
      this.$router.push({ path: "todolist" });
      
    },
    del(index){
       this.$store.commit('del',index);
       
    }
  },
};
</script>
<style  scoped>
#btn {
  margin-left: 10px;
}
.del{
  float: left;
  height: 30px;
  margin-top:-26px;
}
</style>